<script setup>
import MyForm from "@/components/MyForm.vue";
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import MyNav from "@/components/MyNav.vue";
import router from "@/router";
import {listParentsApi, updateApi} from "@/api/PermissionApi";
import {getResponseData} from "@/util";

// 所在房间下拉菜单选项
let optionItems = [];
// 获取权限记录
let permission = JSON.parse(sessionStorage.getItem('permission'));

let permissionParentsItems = ref([]);

// 表单项 + 表单值 + 表单规则
let items = shallowRef([
  {'label': '权限名称', 'prop': 'title', 'required': true, 'span': 12},
  {
    'label': '权限地址', 'prop': 'url', 'required': false, 'span': 12,
    'placeholder': '权限地址必须以 "/" 开头'
  },
  {'label': '权限图标', 'prop': 'icon', 'type': 'icon', 'required': false},
  {
    'label': '上级权限', 'prop': 'pid', 'type': 'select',
    'optionItems': permissionParentsItems.value,
  },
  {'label': '权限描述', 'prop': 'info', 'type': 'textarea', 'required': false},
]);

let data = shallowReactive(permission);

// 表单规则
let rules = {
  'info': RULE.COMMON_INFO,
  'title': RULE.COMM_TITLE,
};
/* ==================== 查询全部父权限 ==================== */

async function listParents() {
  let data = getResponseData(await listParentsApi());
  if (data) {
    permissionParentsItems.value.push({'label': '无上级权限', 'value': 0});
    Object.values(data).forEach(data => {
      permissionParentsItems.value.push({'label': data['title'], 'value': data['id']});
    });
  }
}

onMounted(() => listParents())
</script>

<template>

  <my-nav :items="[
  {'icon': 'User', 'label': '员工管理'},
  {'icon': 'User', 'label': '权限列表', 'url': '/ums/Permission'},
  {'icon': 'User', 'label': '修改权限'},
]"/>

  <el-divider/>
  <my-form type="update"
           :items="items"
           :data="data"
           :rules="rules"
           :api="updateApi"
           :fn="() => router.push('/ums/Permission')"
           :span="1"/>

</template>

<style scoped lang="scss">

</style>